<template>
  <div>
    <el-card>
      <el-row :gutter="4">
        <el-form
          :inline="true"
          label-position="left"
          class="demo-form-inline"
          label-width="100px"
        >
          <el-form-item>
            <el-input
              v-model="searchDto.keywords"
              placeholder="请输入内容 / 评价人 / 机构名称"
              style="width:250px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchDto.key" placeholder="请选择模块">
              <el-option
                v-for="item in getDictionary('EVALUATE')"
                :key="item.keyword"
                :label="item.label"
                :value="item.keyword"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" type="primary" @click="clear">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <page-table
        ref="multipleSelection"
        :page-data="pageData"
        :loading="loading"
        :do-get-page-data="getPageData"
      >
        <el-table-column
          label="编号"
          align="center"
          type="index"
          width="60px"
        ></el-table-column>
        <el-table-column
          prop="evaluateContent"
          label="内容"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="星级" align="center" width="180">
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.evaluateStart"
              disabled
              disabled-void-color="#d1d1d1"
            >
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column
          prop="evaluateUserName"
          label="评价人"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column label="模块" align="center" width="180">
          <template slot-scope="scope">
            {{ scope.row.moduleType | keyText("EVALUATE") }}
          </template>
        </el-table-column>
        <el-table-column
          prop="organizationName"
          label="机构名称"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="评价时间"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="管理" width="180" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="详情" placement="top">
              <el-button
                type="button"
                size="mini"
                icon="el-icon-search"
                @click="view(scope.row)"
              >
              </el-button>
            </el-tooltip>
            <!--            <el-tooltip-->
            <!--              content="删除"-->
            <!--              placement="top"-->
            <!--              v-if="scope.row.publishStatus !== 'PUBLISH'"-->
            <!--            >-->
            <!--              <el-button-->
            <!--                size="mini"-->
            <!--                icon="el-icon-delete"-->
            <!--                @click="del(scope.row)"-->
            <!--              >-->
            <!--              </el-button>-->
            <!--            </el-tooltip>-->
          </template>
        </el-table-column>
      </page-table>
    </el-card>
    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="dialogTableVisible">
      <el-descriptions :column="2" :labelStyle="labelStyle" border>
        <el-descriptions-item label="内容" :span="2">{{
                                                   viewData.evaluateContent
                                                   }}
        </el-descriptions-item>
        <el-descriptions-item label="星级">
          <el-rate
            v-model="viewData.evaluateStart"
            disabled
            disabled-void-color="#d1d1d1"
          >
          </el-rate>
        </el-descriptions-item>
        <el-descriptions-item label="模块">{{
                                         viewData.moduleType | keyText("EVALUATE")
                                         }}
        </el-descriptions-item>
        <el-descriptions-item label="评价人">{{
                                          viewData.evaluateUserName
                                          }}
        </el-descriptions-item>
        <el-descriptions-item label="评价时间">{{
                                           viewData.createTime
                                           }}
        </el-descriptions-item>
        <el-descriptions-item label="机构名称">{{
                                           viewData.organizationName
                                           }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "evaluateManage",
  created() {
    this.getPageData();
  },
  data() {
    return {
      pageData: {},
      dialogTableVisible: false,
      loading: false,
      dateRange: [],
      searchDto: {
        keywords: "",
        key: ""
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      viewData: {},
      labelStyle: {
        width: "110px",
        textAlign: "center"
      }
    };
  },
  methods: {
    // 获取分页数据
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      tem.startTime = this.dateRange[0];
      tem.endTime = this.dateRange[1];
      this.API.getServiceEvaluatePageList(tem).then(ret => {
        this.pageData = ret.data;
      });
    },
    // 查询
    search() {
      this.getPageData();
    },
    // 清空
    clear() {
      this.searchDto = {
        keywords: "",
        key: ""
      };
      this.dateRange = [];
      this.getPageData();
    },
    // 详情
    view({ id }) {
      this.API.getServiceEvaluateById({ id }).then(ret => {
        this.viewData = ret.data;
        this.dialogTableVisible = true;
      });
    },
    // 删除
    del({ id }) {
      this.$confirm("确认删除?", "提示", {
        type: "warning"
      }).then(() => {
        this.API.deleteServiceEvaluateById({ id }).then(ret => {
          this.success("删除成功!");
          this.getPageData();
        });
      });
    }
  }
};
</script>
<style scoped></style>
